html{
    font-size: 14px;
}
body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    main{
        width: 600px;
        height: 300px;
        border: solid 1px black;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        &:hover{
            section{
                animation-play-state: paused;
            }
        }
        section{
            display: grid;
            width: 3600px;
            grid-template-columns: repeat(6,600px);
            animation-name: slide;
            animation-duration: 12s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(6,end);
        }
       ul{
           width: 100%;
           position: absolute;
           bottom: 10px;
           display: flex;
           justify-content: center;
           
           li{
               width: 15px;
               height: 15px;
               border-radius: 50%;
               background-color: grey;
               opacity: 0.7;
               margin: 5px;
           }
       }
        
    }
}
@keyframes slide {
    to{
        transform: translateX(-3600px);
    }
}